(function ($) {
    'use strict';


    /* Engaged Users */
    var engagedUsersCtx = document.getElementById('engaged-users').getContext("2d");
    var gradientStrokeengagedUsers = engagedUsersCtx.createLinearGradient(0, 0, 0, 450);
    gradientStrokeengagedUsers.addColorStop(0, '#009efb');

    var gradientFillengagedUsers = engagedUsersCtx.createLinearGradient(0, 0, 0, 450);
    gradientFillengagedUsers.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFillengagedUsers.addColorStop(1, "rgba(255,255,255,0)");

    new Chart(engagedUsersCtx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
            datasets: [{
                label: "Data",
                borderColor: gradientStrokeengagedUsers,
                pointBorderColor: gradientStrokeengagedUsers,
                pointBackgroundColor: gradientStrokeengagedUsers,
                pointHoverBackgroundColor: gradientStrokeengagedUsers,
                pointHoverBorderColor: gradientStrokeengagedUsers,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                fill: true,
                backgroundColor: gradientFillengagedUsers,
                borderWidth: 2,
                data: [5, 1, 8, 1, 3, 7, 8, 4, 3, 6, 8, 9, 4, 5, 8, 2, 6, 4, 8, 3]
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            }
        }
    });

    /* Page Impressions */
    var pageImpressionsCtx = document.getElementById('page-impressions').getContext("2d");
    var gradientStrokepageImpressions = pageImpressionsCtx.createLinearGradient(0, 0, 0, 450);
    gradientStrokepageImpressions.addColorStop(0, '#009efb');

    var gradientFillpageImpressions = pageImpressionsCtx.createLinearGradient(0, 0, 0, 450);
    gradientFillpageImpressions.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFillpageImpressions.addColorStop(1, "rgba(255,255,255,0)");

    new Chart(pageImpressionsCtx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
            datasets: [{
                label: "Data",
                borderColor: gradientStrokepageImpressions,
                pointBorderColor: gradientStrokepageImpressions,
                pointBackgroundColor: gradientStrokepageImpressions,
                pointHoverBackgroundColor: gradientStrokepageImpressions,
                pointHoverBorderColor: gradientStrokepageImpressions,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                fill: true,
                backgroundColor: gradientFillpageImpressions,
                borderWidth: 2,
                data: [8, 5, 1, 8, 5, 9, 4, 3, 4, 5, 8, 4, 4, 8, 9, 5, 5, 1, 3, 6]
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            }
        }
    });


    // Overview slider
    $('.ms-medical-overview-slider').slick({
        dots: false,
        arrows: false,
        infinite: false,
        slidesToShow: 4,
        arrows: true,
        prevArrow: $('.prev-item'),
        nextArrow: $('.next-item'),
        responsive: [
            {
                breakpoint: 1400,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: false
                }
            },
            {
                breakpoint: 1200,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 1,
                    infinite: true,
                    dots: false
                }
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            },
            {
                breakpoint: 420,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1
                }
            }
        ]
    });


    //Group Bar Chart
    new Chart(document.getElementById("bar-chart-grouped"), {
        type: 'bar',
        data: {
            labels: ["1900", "1950", "1999", "2050"],
            datasets: [
                {
                    label: "ICU",
                    backgroundColor: "#009efb",
                    data: [133, 221, 783, 2478]
                }, {
                    label: "OPD",
                    backgroundColor: "#4f8dca",
                    data: [408, 547, 675, 734]
                }
            ]
        },
        options: {
            title: {
                display: true,
                text: 'Patient In'
            }
        }
    });


    //Line Chart
    var ctx = document.getElementById('line-chart').getContext("2d");
    var gradientStroke = ctx.createLinearGradient(0, 0, 0, 450);
    gradientStroke.addColorStop(0, '#009efb');

    var gradientFill = ctx.createLinearGradient(0, 0, 0, 450);
    gradientFill.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFill.addColorStop(1, "rgba(0, 158, 251, 0.04)");

    // all data
    var data_1 = [1800, 1600, 2300, 2800, 3600, 2900, 3000, 3800, 3600];
    var data_2 = [4100, 3800, 3200, 3400, 2700, 2600, 3300, 3000, 2900];
    var labels = ["Jan-11", "Jan-12", "Jan-13", "Jan-14", "Jan-15", "Jan-16", "Jan-17", "Jan-18", "Jan-19"];

    var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: labels,
            datasets: [{
                label: "Patient",
                borderColor: gradientStroke,
                pointBorderColor: gradientStroke,
                pointBackgroundColor: gradientStroke,
                pointHoverBackgroundColor: gradientStroke,
                pointHoverBorderColor: gradientStroke,
                pointBorderWidth: 1,
                pointHoverRadius: 4,
                pointHoverBorderWidth: 1,
                pointRadius: 2,
                fill: true,
                backgroundColor: gradientFill,
                borderWidth: 1,
                data: data_1
            }]
        },
        options: {
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    ticks: {
                        fontColor: "rgba(0,0,0,0.5)",
                        fontStyle: "bold",
                        beginAtZero: true,
                        maxTicksLimit: 200,
                        padding: 20
                    },
                    gridLines: {
                        drawTicks: false,
                        display: false
                    }

                }],
                xAxes: [{
                    gridLines: {
                        zeroLineColor: "transparent"
                    },
                    ticks: {
                        padding: 20,
                        fontColor: "rgba(0,0,0,0.5)",
                        fontStyle: "bold"
                    }
                }]
            }
        }
    });


    //Line Chart 2
    var ctx2 = document.getElementById('line-chart-2').getContext("2d");
    var gradientStroke2 = ctx2.createLinearGradient(0, 0, 0, 450);
    gradientStroke2.addColorStop(0, '#009efb');

    var gradientFill2 = ctx2.createLinearGradient(0, 0, 0, 450);
    gradientFill2.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFill2.addColorStop(1, "rgba(255,255,255,0)");

    var lineChart2 = new Chart(ctx2, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            datasets: [{
                label: "Data",
                borderColor: gradientStroke2,
                pointBorderColor: gradientStroke2,
                pointBackgroundColor: gradientStroke2,
                pointHoverBackgroundColor: gradientStroke2,
                pointHoverBorderColor: gradientStroke2,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                fill: true,
                backgroundColor: gradientFill2,
                borderWidth: 2,
                data: [1, 4, 7, 3, 1, 7, 2, 5, 8, 3, 7, 5, 4, 3, 7]
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            }
        }
    });


    //Line chart 3
    var zCashCtx = document.getElementById('line-chart-3').getContext("2d");
    var gradientStrokeZCash = zCashCtx.createLinearGradient(0, 0, 0, 450);
    gradientStrokeZCash.addColorStop(0, '#009efb');

    var gradientFillZCash = zCashCtx.createLinearGradient(0, 0, 0, 450);
    gradientFillZCash.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFillZCash.addColorStop(1, "rgba(255,255,255,0)");

    new Chart(zCashCtx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            datasets: [{
                label: "Data",
                borderColor: gradientStrokeZCash,
                pointBorderColor: gradientStrokeZCash,
                pointBackgroundColor: gradientStrokeZCash,
                pointHoverBackgroundColor: gradientStrokeZCash,
                pointHoverBorderColor: gradientStrokeZCash,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                fill: true,
                backgroundColor: gradientFillZCash,
                borderWidth: 2,
                data: [5, 6, 8, 1, 5, 3, 9, 7, 5, 8, 7, 3, 6, 9, 1]
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            }
        }
    });


    //Line chart 4
    var peerCoinCtx = document.getElementById('line-chart-4').getContext("2d");
    var gradientStrokePeercoin = peerCoinCtx.createLinearGradient(0, 0, 0, 450);
    gradientStrokePeercoin.addColorStop(0, '#009efb');

    var gradientFillPeercoin = peerCoinCtx.createLinearGradient(0, 0, 0, 450);
    gradientFillPeercoin.addColorStop(0, "rgba(0, 158, 251, 0.50)");
    gradientFillPeercoin.addColorStop(1, "rgba(255,255,255,0)");

    new Chart(peerCoinCtx, {
        type: 'line',
        data: {
            labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            datasets: [{
                label: "Data",
                borderColor: gradientStrokePeercoin,
                pointBorderColor: gradientStrokePeercoin,
                pointBackgroundColor: gradientStrokePeercoin,
                pointHoverBackgroundColor: gradientStrokePeercoin,
                pointHoverBorderColor: gradientStrokePeercoin,
                pointBorderWidth: 0,
                pointHoverRadius: 0,
                pointHoverBorderWidth: 0,
                pointRadius: 0,
                fill: true,
                backgroundColor: gradientFillPeercoin,
                borderWidth: 2,
                data: [1, 4, 7, 3, 5, 7, 6, 5, 8, 3, 5, 5, 4, 3, 7]
            }]
        },
        options: {
            elements: {
                line: {
                    tension: 0
                }
            },
            legend: {
                display: false,
                position: "bottom"
            },
            scales: {
                yAxes: [{
                    display: false,
                }],
                xAxes: [{
                    display: false,
                }]
            }
        }
    });


})(jQuery);
